<template>
  <div>
    <el-row :gutter="12">
      <el-col :span="6">
        <el-input
          v-model="queryData.searchKey"
          placeholder="TOPIC"
          size="small"
          clearable
          :maxlength="64"
          prefix-icon="el-icon-search"
        />
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="loadData(1)">{{
          $t("sys.search")
        }}</el-button>
        <el-button @click="handleReset">{{ $t("sys.reset") }}</el-button>
      </el-col>
    </el-row>
    <el-table
      class="mt10 ds-table"
      :data="tableData"
      v-loading="loading"
      style="width: 100%"
      current-row-key="id"
      stripe
      border
    >
      <el-table-column prop="topic" :label="$t('sys.middleware_mqtt_topic')" />
      <el-table-column prop="mqttKey" :label="$t('sys.middleware_mqtt_key')" />
      <el-table-column
        prop="scriptCode"
        :label="$t('sys.middleware_mqtt_script')"
      />
      <el-table-column prop="notes" :label="$t('sys.description')" />
      <el-table-column
        prop="latestMessage"
        :label="$t('sys.middleware_mqtt_current_value')"
      >
        <template slot-scope="scope">
          <div class="copyStyle" @click="copy(scope.row.latestMessage)">
            {{ scope.row.latestMessage }}
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="tr mt24">
      <x-pagination
        :total="total"
        :pageSize.sync="pageData.pageSize"
        :pageNo.sync="pageData.pageNo"
        @search="loadData()"
      />
    </div>
  </div>
</template>
<script>
import { getHmmqttsubscriptionPagelist } from "@/apis/paas/HmMqttSubscriptionController.js"
import { copy } from "@/utils/util"
export default {
  name: "MqttSubscription",
  data() {
    return {
      copy,
      loading: false,
      queryData: {},
      tableData: [],
      total: 0,
      pageData: {
        pageSize: 10,
        pageNo: 1,
      },
      tableData: [],
    }
  },
  created() {
    this.loadAllData()
  },
  methods: {
    async loadAllData() {
      this.loadData()
    },
    loadData(pageNo = this.pageData.pageNo) {
      this.loading = true
      const params = {
        ...this.queryData,
        ...this.pageData,
        pageNo,
      }
      getHmmqttsubscriptionPagelist(params)
        .then((res) => {
          if (res.data.length === 0 && pageNo > 1) {
            this.loadData(pageNo - 1)
            return
          }
          this.tableData = res.data
          this.total = res.totalCount
          this.pageData = {
            pageSize: res.pageSize,
            pageNo: res.pageNo,
          }
        })
        .finally(() => {
          this.loading = false
        })
    },

    handleReset() {
      this.queryData = {}
      this.loadData(1)
    },
  },
}
</script>
<style lang="scss" scoped>
.copyStyle {
  cursor: pointer;
  color: #409eff;
}
</style>
